

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
        <script
        src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css" />

        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->
        <title>dbme!!!!</title>

        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>

        <script type="text/javascript">
/* Dutch (UTF-8) initialisation for the jQuery UI date picker plugin. */
/* Written by Mathias Bynens <http://mathiasbynens.be/> */
jQuery(function($){
	$.datepicker.regional['nl'] = {
		closeText: 'Sluiten',
		prevText: '←',
		nextText: '→',
		currentText: 'Vandaag',
		monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni',
		'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
		monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun',
		'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
		dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
		dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
		dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
		weekHeader: 'Wk',
		dateFormat: 'dd-mm-yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
	$.datepicker.setDefaults($.datepicker.regional['nl']);
});
            ////jquery datepicker met aangepast datumformaat

	$(function() {
            
		$( "#from" ).datepicker({
                    
			defaultDate: "+1w",
			minDate:  0,
                        maxDate:  30,
                        changeMonth: false,
                        changeYear: false,
                       
			onSelect: function( selectedDate ) {
                            
				$( "#to" ).datepicker( "option", "minDate", selectedDate );
                              
			}
		});
                
        
		$( "#to" ).datepicker({
			defaultDate: "+1w",
                        minDate:  30,
                        maxDate:  30,
                        changeMonth: false,
                        changeYear: false,
			onSelect: function( selectedDate ) {
				$( "#from" ).datepicker( "option", "maxDate", selectedDate );
			}
                        
		});
	});
        
	</script>
    </head>
    <body>
        <div>
            <div class="title">1. Voor welke datum/periode zoekt u geluid?</div>
            <div class="content">
                <form id="frm_date" name="frm_date" action="stap2.php" method="post">
                    <input type="hidden" name="action" value="multiple" />
                    <p><input type="radio" name="dt"value="gdt" required="required" /> ik heb nog geen vast datum</p> 
                    Aantal dagen: <input type="number" min="1" max="100" name="aantal" size="4" value="" />
                    <p><input type="radio" name="dt" value="dt" required="required" />ik weet de datum/ periode</p>
                    <p>Van (09 : 00): <input type="text" class="selector" name="from" id="from" class="from" value="" /></p>
                    <p>Tot (09 : 00): <input type="text" name="to" id="to" value="" /></p>
                    <input type="submit" value="volgende stap"/> <br />
                </form>
            </div>
        </div>